<template>
	<div class="pwxg">
		<div class="logo-img"><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/login/loginlogo.png" @click="zhuye()"/></div>
		<ul class="pwxg-from">
			<li :class="{'active':pwxgtelshow}"><span><img src="../img-login/icon_phone_dis@3x.png"/></span><span><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/login/icon_phone_sel@2x.png"/></span><input type="number" name="" id="" value="" placeholder="请输入手机号码" v-model="tel" @focus="pwxgtelshow=!pwxgtelshow" @blur="pwxgtelshow=!pwxgtelshow"/><span><img src="../img-login/icon_close@3x.png" @click="qingchu()" v-show="tel"/></span></li>
			<li class="pwxg-yzm" :class="{'active':pwxgyzmshow}"><span><img src="../img-login/icon_check_dis@3x.png"/></span><span><img src="http://liangzhong.oss-cn-hangzhou.aliyuncs.com/newwap/login/yzmdl.png"/></span><input type="number" name="" id="" value="" placeholder="请输入验证码" v-model="yzm" @focus="pwxgyzmshow=!pwxgyzmshow" @blur="pwxgyzmshow=!pwxgyzmshow"/><span @click="hqyzm()" v-if="yzmshow">获取验证码</span><span v-else class="cxfs" v-html="djsyzm"></span></li>
		</ul>
		<p class="xiugaipw" @click="xgpw()">修改密码</p>
		<p class="xybtn">——我已经同意并阅读<a href="http://www.ntyouxuan.com/index.php?app=article&act=view&article_id=48">《农淘优选用户协议》</a>——</p>
	</div>
</template>

<script>
	var furl = 'http://www.ntyouxuan.com/';
	export default{
		name:"pwxg",
		data () {
			return{
				tel:"",
				yzmshow:true,
				yzm:"",
				djsyzm:"",
				pwxgtelshow:false,
				pwxgyzmshow:false
			}
		},
		methods:{
			qingchu:function(){
				this.tel="";
			},
			hqyzm:function(){
				var self=this;
				if(this.tel&&this.tel.length==11){
					this.yzmshow=false;
					self.djsyzm='60秒后<br />重新发送';
					for(var i=60;i>0;i--){
						(function(i){
							var a=i;
							var b=60;
							setTimeout(function(){
								self.djsyzm=b-a+'秒后<br />重新发送';
								if(a==60){
									self.yzmshow=true;
								}
							},i*1000);
						})(i);
					};
					$.ajax({
						type:"post",
						url:furl+"index.php?app=ajax&act=send_code&type=find",
						data:{"mobile":self.tel},
						dataType:"json",
						success:function(res){
							if(res.done){
								
							}
						}
					});
				}else {
					layer.open({
						content: '请输入正确的手机号',
						skin: 'msg',
						time: 3 //3秒后自动关闭
					});
				}
			},
			zhuye: function(){
				window.location.href='http://www.ntyouxuan.com/newnt/#/';
			},
			xgpw:function(){
				var self=this;
				if(this.tel){
					$.ajax({
						type:"post",
						url:furl+"index.php?app=ajax&act=wap_find_password",
						data:{"phone_mob":self.tel,"confirm_code":self.yzm},
						dataType:"json",
						success:function(res){
							if(res.done){
								localStorage.setItem("nt-tel",self.tel);
								localStorage.setItem("nt-ym",self.yzm);
								self.$router.push({path:'/cspw'});
							}
							
						}
					})
				}
				
			}
		}
	}
</script>

<style>
.pwxg{font-size:0;background-color:#fff;height:100%;}
.pwxg-from{padding:0.8rem 0.8rem 0;box-sizing: border-box;}
.pwxg-from li{position:relative;}
.pwxg-from li img{width:0.44rem;height:0.44rem;}
.pwxg-from li span{display: inline-block;float:left;margin-right: 0.23rem;margin-top: 0.1rem;}
.pwxg-from li span:nth-child(2){display: none;}
.pwxg-from li:first-child {margin-bottom: 0.49rem;}
.pwxg-from li:first-child span:last-child{position:absolute;right:0;top:0.14rem;margin-top:0;border-radius:50%;width:0.28rem;height:0.28rem;font-size:0;}
.pwxg-from li:first-child span:last-child>img{width:0.44rem;height:0.44rem;float:right;}
.pwxg-from li>input{height:0.7rem;border-bottom: 1px solid #eee;font-size:0.32rem;width:4.82rem;color:#999;padding-left:0.32rem;}
.pwxg-yzm span:last-child{font-size:0.26rem;line-height:0.26rem;color:#A3A5A7;padding-left: 0.16rem;border-left:1px solid #eee;position:absolute;right:0;bottom:0.26rem;display: inline-block;width:1.42rem;text-align: center;}
.xiugaipw{width:5.74rem;height:0.9rem;border-radius:0.9rem;
background: -webkit-linear-gradient(left, #ffb661 , #fb9722); 
    background: -o-linear-gradient(right, #ffb661, #fb9722); 
    background: -moz-linear-gradient(right, #ffb661, #fb9722);
    background: linear-gradient(to right, #ffb661 , #fb9722);
color:#fff;font-size:0.36rem;margin:0.8rem auto;text-align: center;line-height: 0.9rem;}
.pwxg-yzm .cxfs{bottom:0.12rem !important;color:#8DB87E !important;}
</style>